<template>
  <view class="foot-button" v-if="buttonList">
    <view class="wrap zwyHeightSec">
      <view
        v-for="(item, index) in buttonList"
        :class="item.disabled ? 'xq-disabled' : ''"
        :key="index"
      >
        <view class="foot-button-text-wrap">
          <tui-button
            plain
            link
            showWaves
            shape="circle"
            @click="tapButton(item, index)"
            width="140rpx"
            height="140rpx"
            style="z-index: 100; transform: translateY(-40rpx)"
          ></tui-button>
          <view class="foot-button-text-wrap-box">
            <text :class="[`iconfont icon-${item.icon}`]"></text><br />
            <text>{{ item.name }}</text>
            
          </view>
        </view>
      </view>
      <view
        class="bottom"
        :style="{ height: `calc(${bottomHeight} - 10rpx)` }"
      />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    buttonList: {
      default: [],
      type: Array,
    },
    flag: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      bottomHeight: "env(safe-area-inset-bottom)",
    };
  },
  onShow() {},
  onShareAppMessage() {
    return this.$util.returnShareObj();
  },
  onLoad() {},
  created() {
     //#ifdef MP-WEIXIN
     uni.getSystemInfo({
      success: (res) => {
        if (res.platform == "ios") {
          this.bottomHeight = res.screenHeight - res.safeArea.bottom + "px";
        }
      },
    });
    //#endif
  },
  options: { styleIsolation: "shared" },
  methods: {
    tapButton(item, index) {
      if (!this.flag && uni.getStorageSync("oldSalerId")) {
        this.$util.showToast("非本人登录，无操作权限");
        return;
      }
      if (item.disabled) {
        if (item.tips) {
          this.$util.showToast(item.tips);
        }
      } else {
        this.$emit("tapButton", index);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.foot-button {
  width: 100vw;
  position: fixed;
  bottom: 0rpx;
  z-index: 10;
  ::v-deep .zwyHeightSec::before {
    animation-iteration-count: 1;
  }
  .wrap {
    background-color: $theme-color;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    color: #ffffff;
    font-size: 20rpx;
    line-height: 20rpx;
    overflow: hidden;
    z-index: 10;
  }
  view {
    flex-grow: 1;
  }
  &-text-wrap {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    flex-grow: 1;
    margin-bottom: -40rpx;
    position: relative;
    ::v-deep .zwyHeightSec::before {
      animation-iteration-count: 0;
    }
    &-box {
      width: 100%;
      position: absolute;
      margin: 0;
      top: 10rpx;
      text:first-child {
        font-size: 60rpx;
        line-height: 60rpx;
      }
    }
  }
  .bottom {
    width: 100%;
    // height: calc(env(safe-area-inset-bottom) - 10rpx);  //input聚焦导致失效
  }
}
</style>
